<style lang="scss" scoped>
   .g-card{
       min-height:300px;
       padding:10px;
       background:#fff;
   }
</style>
<template>
    <div id="genomics">
        <div class="g-card" v-if="drugId">
            <h2>{{drugName}}</h2>
            <el-tabs class="border-card" type="border-card">
                <el-tab-pane label="药物疗效">
                    <drug-effcacy @drugName="getName"></drug-effcacy>
                </el-tab-pane>
                <el-tab-pane label="药物代谢">
                    <drug-metabolism  @drugName="getName"></drug-metabolism>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="g-card" v-else>
            请先选择药物
        </div>
    </div>
</template>
<script>
import drugEffcacy from '@/views/medicine/drugEffcacy.vue';
import drugMetabolism from '@/views/medicine/drugMetabolism.vue';
export default {
    name: 'genomics',//药物基因组学
    data(){
        return{
            drugName:"",
            drugId:""
        }
    },
    methods:{
        getName(val){
            this.drugName = val;
        }
    },
    components:{
        drugEffcacy,
        drugMetabolism,
    },
    mounted() {
        this.drugId = this.$store.state.searchId ? this.$store.state.searchId : '';
    },
    watch:{
        "$store.state.searchId":function(){
            if(this.drugId != this.$store.state.searchId){
                this.drugId = this.$store.state.searchId;
            }
        }
    },
}
</script>